<template>
    <div class="List">
        <!--数据统计-->
         <div class="tongji" >
            <RouterLink to="/layout/data" class="tongji-button" >数据统计</RouterLink> 
        </div>
        <div class="negative">
            <!--作业名-->
            <div class="hname">
            <span type="text">{{ homeworkName }}</span>
            </div>
            <!-- 搜索模块 -->
            <div class="search" style="position: absolute; top: 200px; right: 20px;">
                <form action="/search" method="get">
                    <input type="text" name="query" placeholder="请输入学号名称" required>
                    <button type="submit">
                        <i class="iconfont icon-sousuolansousuotubiao"></i>
                    </button>
                </form>
            </div>
     </div>
            
  <!--作业列表-->
    <div class="hlist">
        <div class="elist">
            <el-table :data="paginatedData"  style="width: 100%;padding:15px">
                <el-table-column
                    prop="studentId"
                    label="学号"
                    width="180"
                    sortable
                    :sort-method="sortByStudentId">
                    <template slot-scope="scope">
                        <i class="iconfont icon-wenjian-wendangtubiao"></i>
                        <span style="margin-left: 10px">{{ scope.row.studentId }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="studentName"
                    label="姓名"
                    width="200">
                </el-table-column>
                <el-table-column
                    prop="finishTime"
                    label="提交时间"
                    width="300">
                </el-table-column>
                <el-table-column
                    prop="score"
                    label="评分"
                    width="100">
                </el-table-column>
                <el-table-column
                    prop="state"
                    label="作业状态"
                    width="200">
                </el-table-column>
                <el-table-column
                    prop="option"
                    label="操作">
                    <template slot-scope="scope">
                      
                        <el-button
                        size="mini"
                        @click="handleEdit(scope.row)">查看</el-button>
                        
                    </template> 
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <div class="fenye">
                <el-pagination
                    @current-change="handlePageChange"
                    @size-change="handleSizeChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
        </div>
    </div>
</div>
</template>
<script>
import axios from 'axios';

export default {
    data() {
        return {
            tableData: [],
            currentPage: 1,
            pageSize: 10,
            total: 0,
            sortOrder: 'ascending',
            homeworkName: '' // 用于存储作业名称的映射
        }
    },
    computed: {
        sortedTableData() {
            return [...this.tableData].sort((a, b) => {
                const idA = parseInt(a.studentId) || 0;
                const idB = parseInt(b.studentId) || 0;
                return this.sortOrder === 'ascending' ? idA - idB : idB - idA;
            });
        },
        paginatedData() {
            const start = (this.currentPage - 1) * this.pageSize;
            const end = start + this.pageSize;
            return this.sortedTableData.slice(start, end);
        }
    },
    methods: {
        sortByStudentId(a, b) {
            const idA = parseInt(a.studentId) || 0;
            const idB = parseInt(b.studentId) || 0;
            return idA - idB;
        },
        async fetchData() {
            try {
                const homeworkId = this.$route.query.homeworkId;
                console.log('获取到的作业ID:', homeworkId);
                
                if (!homeworkId) {
                    console.warn('未获取到作业ID');
                    return;
                }

                // 首先获取作业名称
                try {
                    const homeworkRes = await axios.get('http://localhost:9999/homework/getHomeworkId', {
                        params: {
                            homeworkId: homeworkId
                        }
                    });
                    
                    if(homeworkRes.data && homeworkRes.data.length > 0) {
                        this.homeworkName = homeworkRes.data[0].homeworkName || '未命名作业';
                        console.log('获取到的作业名称:', this.homeworkName);
                    }
                } catch (error) {
                    console.error('获取作业名称失败:', error);
                    this.homeworkName = '未命名作业';
                }

                // 获取提交列表
                const response = await axios.get('http://localhost:9999/finish/getFinish', {
                    params: {
                        homeworkId: homeworkId
                    }
                });

                console.log('接口返回数据:', response.data);
                
                // 过滤和处理数据
                this.tableData = response.data
                    .filter(item => item.homeworkId.toString() === homeworkId.toString())
                    .map(item => ({
                        ...item,
                        studentId: item.studentId.toString(),
                        studentName: item.studentName || '未知',
                    }));

                console.log('处理后的数据:', this.tableData);
                this.total = this.tableData.length;
            } catch (error) {
                console.error('获取提交列表失败:', error);
                this.$message.error('获取提交列表失败');
            }
        },

        handlePageChange(newPage) {
            this.currentPage = newPage;
        },

        handleSizeChange(newSize) {
            this.pageSize = newSize;
            this.currentPage = 1; // 重置到第一页
        },

        handleEdit(row) {
            console.log('查看作业详情:', row);
            this.$router.push({
                path: '/layout/pigai',
                query: {
                    finishId: row.finishId 
                }
            });
        }
    },
    created() {
        this.fetchData();
    },
    watch: {
        '$route.query.homeworkId': {
            handler(newVal) {
                if (newVal) {
                    this.currentPage = 1; // 重置页码
                    this.fetchData();
                }
            },
            immediate: true
        }
    }
};
</script>

<style lang="less" scoped>
.tongji {
    position: absolute;
    top: 120px;
    right: 200px;
    .tongji-button {
        display: inline-block;
        padding: 10px 20px;
        background-color:rgba(53, 181, 208, 1);
        color: white;
        text-decoration: none;
        border-radius: 4px;
        border: none;
        cursor: pointer;
        font-size: 16px;
        transition: background-color 0.3s;
        &:hover {
            background-color: rgb(32, 136, 159);
        }
    }
}
.hname{
    border: 1px solid #ccc;
    width: 250px;
    height:57px;
    font-size: 28px;
    font-family: "楷体";
    box-shadow: 0 0px 20px rgba(0, 0, 0, 0.4);
    background: rgb(109, 208, 228);
    /* 新增样式 */
    display: flex;
    align-items: center;
    justify-content: center;
}
.negative {
    background: rgb(236, 236, 236);
    width: 1260px; /* 设置课程容器的宽度 */
    height: 30px; /* 让高度根据内容自适应 */
    margin: 110px auto; /* 水平居中 */
    display: flex; /* 使用Flexbox布局 */
    justify-content: space-between; /* 水平居中 */
    align-items: center; /* 垂直对齐到顶部 */
    padding: 20px; /* 内边距 */
}

.hlist {
background-color: white;
width: 1300px; /* 设置课程容器的宽度 */
min-height: 800px;
margin: -110px auto;
position: relative;
display: flex;
flex-direction: column;
}

.elist {
padding-left: 80px;
flex-grow: 1; /* 让 elist 占据剩余空间 */
}

.fenye {
    margin-top: 20px;
    padding: 20px 0;
    text-align: center;
    background-color: white;
    
    .el-pagination {
        display: inline-block;
        padding: 0;
    }
}

.el-button {
background: rgba(53, 181, 208, 1);
color: white;
}

/* 确保表格内容和分页之间有间距 */
.el-table {
margin-bottom: 15px;
}
.search {
    display: flex;
    align-items: center;
    padding: 28px;//距离上方35px，与导航同高度
    padding-right: 500px;//搜索框距离页面右边为300px
}

.search form {
    display: flex;
    align-items: center;
    width: 100%;
}

.search input[type="text"] {
    width: 200px;
    height: 20px;
    padding: 10px;
    border: none;
    border-radius: 5px 0 0 5px;
    outline: none;
}

.search button[type="submit"] {
    background-color: #f2f2f2;
    border: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    height: 40px;
    padding: 0 20px;
}

.search i {
    font-size: 18px;
}

</style>